<!--
 * @Author: 何 海深 813936564@qq.com
 * @Date: 2024-03-27 15:11:55
 * @LastEditors: 何 海深 813936564@qq.com
 * @LastEditTime: 2024-03-28 20:53:45
 * @FilePath: \fgw-one-map-vue-v2\src\components\header\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%import
-->
<template>
  <div class="header-warp">
    <div class="tools-menu-logo">您好，***。欢迎登录智慧调度系统</div>

    <div class="side-prod-ul">
      <div class="header-left">
        <div class="menu-list">
          <div
            class="list-item"
            v-for="item in showProdLeftList"
            :key="item.path"
            @click="toLink(item.path)"
            :class="[item.path.includes(onlyKey) && 'active']"
          >
            <div class="center"></div>
            <div class="title">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="header-title">
        <div>
          {{ props.title }}
        </div>
      </div>
      <div class="header-right">
        <div class="menu-list">
          <div
            class="list-item"
            v-for="item in showProdRightList"
            :key="item.path"
            @click="toLink(item.path)"
            :class="[item.path.includes(onlyKey) && 'active']"
          >
            <div class="center"></div>
            <div class="title">{{ item.name }}</div>
          </div>
          <div class="list-item" @mouseenter="moreMouseenter" @mouseleave="moreMouseleave">
            <div class="center"></div>
            <div class="title">更多></div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="showProdMoreList.length > 0"
      @mouseenter="rightDropDownMouseenter"
      @mouseleave="moreMouseleave"
      ref="rightDropDown"
      class="right-drop-down"
    >
      <span
        v-for="navItem in showProdMoreList"
        class="right-drop-down-list"
        :class="[navItem.path.includes(onlyKey) && 'active']"
        :key="navItem.sid"
        @click="toLink(navItem.path)"
      >
        {{ navItem.name }}
      </span>
    </div>
    <div class="chose-date">
      <label for="">选择数据截止时间：</label>
      <a-date-picker v-model:value="dataMonthValue" placeholder="请选择日期" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, getCurrentInstance, ComponentInternalInstance } from 'vue'
import type { PropsType } from './type'
import type { Dayjs } from 'dayjs'
import selfMessageIndex from '@/components/self-message/selfMessageIndex'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const props = withDefaults(defineProps<PropsType>(), {
  welecomeText: '您好，***。欢迎登录智慧调度系统',
  title: '广州市固定资产投资智慧调度'
})
const dataMonthValue = ref<Dayjs>()
const onlyKey = ref('')
watch(
  () => route.path,
  (val) => {
    if (val) {
      onlyKey.value = val
    }
  },
  { immediate: true, deep: true }
)
/** 当前显示导航 */
const showProdLeftList = ref([]) as any
const showProdRightList = ref([]) as any
const showProdMoreList = ref([]) as any

function init() {
  let prodList = [
    {
      sid: '1',
      name: '全市统览',
      path: '/cityOverview'
    },
    {
      sid: '2',
      name: '区域概览',
      path: ''
    },
    {
      sid: '3',
      name: '督办事项',
      path: '/supervise'
    },
    {
      sid: '4',
      name: '项目概览-单个项目',
      path: '/investmentSubjectOne'
    },
    {
      sid: '5',
      name: '四大领域-工业投资',
      path: '/gongCom'
    }
  ]
  let showLeft = [] as any
  let showRight = [] as any
  let showMore = [] as any
  let prodList2 = prodList.filter((e) => e.name != '工作台' && e.hideInNar != '1')
  for (let i = 0; i < prodList2.length; i++) {
    if (i < 2) {
      showLeft.push(prodList2[i])
    } else if (i < 3) {
      showRight.push(prodList2[i])
    } else {
      showMore.push(prodList2[i])
    }
  }
  showProdLeftList.value = showLeft
  showProdRightList.value = showRight
  showProdMoreList.value = showMore
}
init()
// 跳转页面
function toLink(path: string) {
  if (!path) {
    selfMessageIndex.info('当前页面正在维护')
    return
  }
  router.push({
    path: path
  })
}
// 鼠标移入更多 相关事件
function moreMouseenter(e: any) {
  ;(proxy?.$refs['rightDropDown'] as any).style.left =
    e.pageX - e.offsetX - e.target.offsetWidth / 4 + 'px'
  ;(proxy?.$refs['rightDropDown'] as any).style.top = 150 * (100 / 2160) + 'vh'
  ;(proxy?.$refs['rightDropDown'] as any).style.display = 'flex'
}
function rightDropDownMouseenter() {
  ;(proxy?.$refs['rightDropDown'] as any).style.display = 'flex'
}
function moreMouseleave() {
  ;(proxy?.$refs['rightDropDown'] as any).style.display = 'none'
}
</script>
<style lang="scss" scoped>
.header-warp {
  width: 100%;
  height: 180vh * $Bh;
  background: url('@/assets/images/components/header/bg_header.png') no-repeat center center;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;

  .tools-menu-logo {
    width: 810vw * $Bw;
    height: 152vh * $Bh;
    font-size: 30vh * $Bh;
    color: #ced3dd;
    padding-left: 63vw * $Bw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .chose-date {
    width: 810vw * $Bw;
    height: 152vh * $Bh;
    padding-left: 144vw * $Bw;
    color: white;
    font-size: 30vh * $Bh;
    color: #ced3dd;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    :deep(.ant-picker) {
      width: 318vw * $Bw;
      height: 72vh * $Bh;

      .ant-picker-input {
        & > input {
          font-size: 30vh * $Bh;
        }

        .ant-picker-suffix {
          font-size: 30vh * $Bh;
        }
      }
    }
  }

  .side-prod-ul {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    position: relative;
    min-width: 2240vw * $Bw;

    .header-left {
      width: calc((100% - 1400vw * $Bw) / 2);
      height: 100%;
      overflow: hidden;
      position: absolute;
      left: 0;

      .menu-list {
        display: flex;
        height: 146vh * $Bh;
        color: #fff;
        font-weight: 500;
        padding: 40vh * $Bh 33vh * $Bh 0 0;
        justify-content: flex-end;

        .list-item {
          width: 184vw * $Bw;
          height: 72vh * $Bh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          cursor: pointer;

          // margin-right: -12px;
          .center {
            width: 100%;
            height: 100%;
            background-image: url('@/assets/images/components/headerMenu/bg_btn.png');
            background-size: 100% 100%;
          }

          .title {
            position: absolute;
            width: 100%;
            height: 146vh * $Bh;
            padding: 0 21vw * $Bw;
            font-size: 30vh * $Bh;
            color: #b9c2d0;
            text-align: center;
            line-height: 146vh * $Bh;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &.active {
            .center {
              background-image: url('@/assets/images/components/headerMenu/bg_btn_active.png');
            }

            .title {
              color: #fff;
            }
          }

          & + .list-item {
            margin-left: 33vw * $Bw;
          }
        }
      }
    }

    .header-title {
      width: 1400vw * $Bw;
      height: 100%;

      div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 168vh * $Bh;
        color: white;
        font-size: 58vh * $Bh;
        letter-spacing: 10vw * $Bw;
        line-height: 168vh * $Bh;
        font-weight: 400;
        font-family: 'YouSheBiaoTiHei';
      }
    }

    .header-right {
      width: calc((100% - 1400vw * $Bw) / 2);
      height: 100%;
      overflow: hidden;
      position: absolute;
      right: 0;

      .menu-list {
        display: flex;
        height: 146vh * $Bh;
        color: #fff;
        font-weight: 500;
        padding: 40vh * $Bh 33vh * $Bh 0 0;

        .list-item {
          width: 184vw * $Bw;
          height: 72vh * $Bh;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          cursor: pointer;

          // margin-right: -12px;
          .center {
            width: 100%;
            height: 100%;
            background-image: url('@/assets/images/components/headerMenu/bg_btn.png');
            background-size: 100% 100%;
          }

          .title {
            position: absolute;
            width: 100%;
            height: 146vh * $Bh;
            padding: 0 21vw * $Bw;
            font-size: 30vh * $Bh;
            color: #b9c2d0;
            text-align: center;
            line-height: 146vh * $Bh;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &.active {
            .center {
              background-image: url('@/assets/images/components/headerMenu/bg_btn_active.png');
            }

            .title {
              color: #fff;
            }
          }

          & + .list-item {
            margin-left: 33vw * $Bw;
          }
        }
      }
    }
  }

  .right-drop-down {
    width: 264vw * $Bw;
    max-height: 288vh * $Bh;
    display: none;
    flex-direction: column;
    position: absolute;
    overflow: hidden auto;
    border-radius: 5vh * $Bh;

    .right-drop-down-list {
      width: 100%;
      height: 72vh * $Bh;
      color: #fff;
      font-weight: 500;
      padding: 0 21vw * $Bw;
      font-size: 30vh * $Bh;
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      background: #153564;

      &:hover {
        background: #3f93bd;
      }

      &.active {
        background: #3f93bd;
      }
    }

    .right-drop-down-list + .right-drop-down-list {
      border-top: 1px solid #194075;
    }
  }
}

::v-deep(.ant-picker) {
  background: #144084;
  border: 1px solid #728cb5;
  color: white;
}

::v-deep(.ant-picker-input input) {
  color: white;
}

::v-deep(.ant-picker .ant-picker-input .ant-picker-suffix .anticon) {
  color: white;
}
</style>
